{extend name="main"}
{block name="style"}
<style>

</style>
{/block}
{block name="body"}
<el-tabs v-model="activeName" class="bg-white px-3">
    <el-tab-pane label="新建活码" name="newQR"></el-tab-pane>
</el-tabs>
<div class="bg-white p-3">
    <el-form :model="form" ref="form" @submit.native.prevent="submitForm" :rules="rules" label-width="160px" label-position="right">
        <el-form-item label="群活码名称(系统内)" prop="title" required="true">
            <el-input class="col-12 col-sm-4 pl-0 pr-0" v-model="form.title" placeholder="请输入群活码名称"></el-input>
        </el-form-item>
        <el-form-item label="企微群活码名称(企微)" prop="ww_title" required="true">
            <el-input class="col-12 col-sm-4 pl-0 pr-0" v-model="form.ww_title" placeholder="请输入企微群活码名称"></el-input>
        </el-form-item>
        <el-form-item label="企微群活码" prop="ww_qr" required="true">
            <el-image v-if="form.ww_qr" style="height: 160px;cursor: pointer;" :src="form.ww_qr" :preview-src-list="[form.ww_qr]">
            </el-image>
            <el-upload action="/uploadFiles" name="file" accept="image/*" :data="{path:'work_wechat/alive_qr'}" :show-file-list="false"
                :on-success="handleQRCodeSuccess" :on-error="handleQRCodeError">
                <el-button size="small" type="primary"><i class="el-icon-upload"></i>&nbsp;上传</el-button>
            </el-upload>
        </el-form-item>
        {if $qr_type!=1}
        <el-form-item label="活码有效期" prop="effective_time" required="true">
            <el-date-picker start-placeholder="开始于" end-placeholder="终止于" v-model="form.effective_time" range-separator="~" type="datetimerange">
            </el-date-picker>
        </el-form-item>
        {/if}

        <el-form-item label="对应群聊" prop="customer_groups" required="true">
            <el-select class="col-12 col-sm-4 pl-0 pr-0" v-model="form.customer_groups" multiple filterable remote reserve-keyword placeholder="请输入关键词"
                :remote-method="searchGroups" :loading="searchingGroups">
                <el-option v-for="item in groups" :key="item.id" :label="item.title" :multiple="true" :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="备用员工" prop="employee">
            <el-select class="col-12 col-sm-4 pl-0 pr-0" :remote-method="searchEmployees" v-model="form.employee" placeholder="输入姓名/手机号搜索" filterable remote
                reserve-keyword :loading="searchingEmployees">
                <el-option v-for="item in employees" :label="item.name" :value="item.id" :key="item.id">
                    <div style="float: left;">
                        <img height="32" style="border-radius: 100%;" :src="avatar(item)" />
                    </div>
                    <span style="float: right; font-size: 14px">{{ item.name }}</span>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
        </el-form-item>
    </el-form>
</div>
{/block}
{{block name='script'}
<script type="text/javascript">
    /* {// 如果有从模板引擎传递的参数，请在这里接收，使用.replace(/[\r\n\s+]/g, '\\n') 过滤非法参数 } */
    const avatar = { userAvatar: "{:config('xy_default_avatar.user')}", userAvatarWomen: "{:config('xy_default_avatar.user_women')}" }
    const groups = JSON.parse('{:json_encode($groups)}'.replace(/[\r\n\s+]/g, '\\n'))
    const employees = JSON.parse('{:json_encode($employees)}'.replace(/[\r\n\s+]/g, '\\n'))
    const qr_type = JSON.parse('{$qr_type}')
    const effective_time = []
    var customer_groups = []
    var form = {}
    /*{if empty($Find.id)}*/
    form = { title: "", ww_title: "", ww_qr: null, qr_type, effective_time, customer_groups }
    /*{else/}*/
    form = JSON.parse('{:json_encode($Find)}'.replace(/[\r\n\s+]/g, '\\n'))
    form.effective_time = [form.release_time, form.end_time].sort()
    /*{/if}*/
</script>
<script type="text/javascript">
    const baseView = { view: XYBase.view, /*loading: false*/ }
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                ...baseView,
                ...avatar,
                groups,
                employees,
                form,
                searchingGroups: false,
                searchingEmployees: false,
                relatedGroups: [],
                relatedEmployee: null,
                rules: {
                    title: [
                        { required: true, message: '请输入系统活码名称', trigger: 'blur' },
                    ],
                    ww_title: [
                        { required: true, message: '请输入微信活码名称', trigger: 'blur' },
                    ],
                    ww_qr: [
                        { required: true, message: '请上传微信活码', trigger: 'blur' },
                    ],
                    effective_time: [
                        { required: true, message: '请选择活码有效期', trigger: 'blur' },
                    ],
                    customer_groups: [
                        { required: true, message: '请选择活码绑定的群聊', trigger: 'blur' },
                    ]
                },
                activeName: 'newQR'
            }
        },
        methods: {
            handleQRCodeSuccess(res, file) {
                if (res) {
                    if (res.code != undefined && res.code == 0) {
                        this.form.ww_qr = res.data.url
                        XYBase.success('上传成功')
                    }
                } else {
                    XYBase.error(XYBase.config.system_network_error)
                }
            },
            searchGroups(keyword) {
                let _this = this
                $.ajax({
                    url: '',
                    type: 'GET',
                    data: { action: 'groups', title: keyword },
                    success(res) {
                        _this.groups = res.data
                        _this.searchingGroups = false
                    }
                })
            },
            searchEmployees(keyword) {
                let _this = this
                $.ajax({
                    url: '',
                    type: 'GET',
                    data: { action: 'employees', name: keyword, mobile: keyword },
                    success(res) {
                        _this.employees = res.data
                        _this.searchingEmployees = false
                    }
                })
            },
            avatar(employee) {
                if (employee.avatar) {
                    return employee.avatar
                }
                return employee.gender == 1 ? this.userAvatar : this.userAvatarWomen
            },
            handleQRCodeError() {

            },
            submitForm() {
                console.log(this.form)
                let _valid = true
                let _this = this
                this.$refs['form'].validate((valid) => {
                    if (!valid) {
                        _valid = valid
                    }
                })
                if (!_valid) {
                    XYBase.error('请把表单填写完整！')
                    return false
                }
                let form = { ...this.form }
                if (form.effective_time != undefined && form.effective_time.length > 1) {
                    // 判断时间是不是Date对象，如果不是则说明是js的时间戳
                    if (form.effective_time[0].__proto__ == new Date().__proto__) {
                        form.effective_time[0] = Math.floor(form.effective_time[0].getTime() / 1000)
                        form.effective_time[1] = Math.floor(form.effective_time[1].getTime() / 1000)
                    } else {
                        form.effective_time[0] = Math.floor(form.effective_time[0] / 1000)
                        form.effective_time[1] = Math.floor(form.effective_time[1] / 1000)
                    }
                }
                $.ajax({
                    url: '',
                    type: 'POST',
                    contentType: 'application/json;charset=utf-8;',
                    data: JSON.stringify(_this.form),
                    success(res) {
                        if (res.code != undefined && res.code == 0) {
                            XYBase.success('添加成功！')
                        } else {
                            XYBase.msg('未保存成功！')
                        }
                    },
                    error(xhr) {
                        console.error(xhr)
                    }
                })
            },
            initHtml() {

            },
        },
        created() {
            this.initHtml()
            XYBase.created(this)
        },
        computed() {

        }
    })
</script>
{/block}